<template>
    <div class="dashboard">

        <el-card style="margin-bottom: 20px;">
            <div class="dashboard-header">
                <div>
                    <el-button type="primary" icon="plus" @click="addPartition">新增分区</el-button>
                    <el-button plain icon="delete">删除分区</el-button>
                    <el-button plain icon="Edit" @click="modifyPartition">修改分区</el-button>
                </div>
                <div>
                    <el-input size="large" placeholder="请输入站点名称或编号搜索" v-model="searchQuery" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button icon="Search" @click="handleSearch"></el-button>
                        </template>
                    </el-input>
                </div>
            </div>
        </el-card>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="el-card-header">
                    <el-tree style="max-width: 600px" :data="regionData" show-checkbox node-key="id"
                        :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps" />
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="el-card-header">
                    <div>
                        <div class="cardheader">
                            <span>关联站点</span>
                            <div>
                                <el-button type="primary" icon="Paperclip"
                                    @click="relatedSitesFormVisible = true">关联站点</el-button>
                            </div>
                        </div>
                        <div style="margin-bottom: 10px;">
                            <el-input placeholder="搜索站点" v-model="searchQuery" @keyup.enter="handleSearch"></el-input>
                        </div>
                        <div class="related-sites">
                            <div class="related-sides-item" v-for="item in siteData">
                                <div>
                                    <div>{{ item.name }}</div>
                                    <span>编号:{{ item.code }}</span>
                                </div>
                                <div>
                                    <el-icon>
                                        <Rank />
                                    </el-icon>
                                </div>
                            </div>

                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card class="el-card-header">
                    <div class="cardheader">
                        <span>地理分布</span>
                    </div>
                    <!-- 地理分布图表 -->
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="24">
                <el-card>
                    <div slot="header" class="cardheader">
                        <span>操作记录</span>
                        <el-button type="primary" icon="download" @click="handleExport">导出记录</el-button>
                    </div>
                    <el-table :data="operationData" stripe>
                        <el-table-column prop="time" label="操作时间" />
                        <el-table-column prop="type" label="操作类型" />
                        <el-table-column prop="operator" label="操作人" />
                        <el-table-column prop="details" label="详情" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog v-model="addPartitionFormVisible" align-center :title="partitionTitle" width="500">
            <el-form :model="form">
                <el-form-item label="分区名称">
                    <el-input v-model="addPartitionForm.name"></el-input>
                </el-form-item>
                <el-form-item label="上级分区">
                    <el-select v-model="addPartitionForm.superior" placeholder="Select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addPartitionFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addPartitionFormVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="relatedSitesFormVisible" align-center title="关联站点" width="500">
            <el-input placeholder="请输入站点名称或编号搜索" size="large" v-model="searchQuery" @keyup.enter="handleSearch">
                <template #append>
                    <el-button icon="Search" @click="handleSearch"></el-button>
                </template>
            </el-input>
            <div class="related-sites-main">
                <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
                    <el-checkbox v-for="item in siteData" :key="city" :label="city" :value="city">
                        <div class="item-name">
                            <div>{{ item.name }}</div>
                            <span>编号:{{ item.code }}</span>
                        </div>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="relatedSitesFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="relatedSitesFormVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>
<script setup>
import { ref } from 'vue';

// 数据定义
const searchQuery = ref('');
const addPartitionFormVisible = ref(false);
const relatedSitesFormVisible = ref(false);
const partitionTitle = ref('新增分区');
const relatedSitesForm = ref({

});
const addPartitionForm = ref({
    name: '',
    superior: ''
});
const regionData = ref([
    {
        id: 1,
        label: '总部分区',
        children: [
            {
                id: 2,
                label: '华东分区',
                children: [
                    { id: 3, label: '上海区域' },
                    { id: 4, label: '江苏区域' }
                ]
            },
            { id: 5, label: '华南分区' }
        ]
    }
]);
const options = ref([
    { value: '正常', label: '正常' },
    { value: '异常', label: '异常' }
]);
const siteData = ref([
    { id: 1, name: '陆家嘴站点', code: 'LJZ001' },
    { id: 2, name: '徐家汇站点', code: 'XJH002' },
    { id: 3, name: '人民广场站点', code: 'RMG003' },
    { id: 4, name: '外滩站点', code: 'WT004' }
]);
const operationData = ref([
    { time: '2024-01-15 10:30:45', type: '新增', operator: '张经理', details: '新增华东分区下的南京区域' },
    { time: '2024-01-15 09:15:22', type: '修改', operator: '李主管', details: '修改上海区域名称' },
    { time: '2024-01-14 16:45:33', type: '删除', operator: '王经理', details: '删除杭州区域' }
]);

// 方法定义
function handleEdit(data) {
    // 实现编辑逻辑
}

function handleDelete(data) {
    // 实现删除逻辑
}

function handleAddSite() {
    // 实现添加站点逻辑
}

function handleSearch() {
    // 实现搜索逻辑
}

function handleEditSite(row) {
    // 实现编辑站点逻辑
}

function handleDeleteSite(row) {
    // 实现删除站点逻辑
}

function handleExport() {
    // 实现导出逻辑
}

const addPartition = () => {
    console.log('新增分区');
    partitionTitle.value = '新增分区';
    addPartitionFormVisible.value = true;
}
const modifyPartition = () => {
    console.log('修改分区');
    partitionTitle.value = '修改分区';
    addPartitionFormVisible.value = true;
}
</script>

<!-- 您的模板代码 -->

<style scoped lang="scss">
.cardheader {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}

.related-sites {
    height: 280px;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
}

.related-sides-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9f9;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.el-card-header {
    height: 400px;
}

.related-sites::-webkit-scrollbar {
    display: none;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item-name{
    margin-left: 10px;
    >div{
        font-size: 16px;
        margin-bottom: 5px;
        color: black;
        font-weight: normal;
    }
}
:deep(.el-checkbox-group) {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

:deep( .related-sites-main .el-checkbox) {
    border-bottom: 2px solid #f2f3f5;
    // border: 1px solid red;
    height: 60px;
    width: 100%;
    margin-bottom: 10px;
}
</style>